<template>
  <div class="login_container">
    <div class="login_banner">
      <div class="login_form_container">
        <z-form
          ref="zFormRef"
          :schemas="getSchemas()"
          :formProps="{
            inline: false,
            labelPlacement: 'top',
            labelWidth: 'auto',
            showRequireMark: false,
          }"
          :hasFormAction="false"
          @enterKeydown="submit"
        ></z-form>

        <n-button @click="submit" type="primary">登录</n-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ZFormItemSchema } from "@/components/Form/typings";
import ZForm from "@components/Form/ZForm.vue";
import { ref } from "vue";
import { getSelfInfo, login } from "@/api/octp/routes/user";
import { useRouter } from "vue-router";
import { useAuthStore } from "@/stores/auth";
import { HOME_PAGE_ROUTE_PATH } from "@/utils/constants";

const router = useRouter();
const zFormRef = ref();

const getSchemas = (): ZFormItemSchema[] => {
  return [
    {
      label: "学号",
      path: "num",
      component: "NInput",
      rule: {
        required: true,
      },
      componentProps: {
        style: { width: "240px" },
      },
    },
    {
      label: "密码",
      path: "password",
      component: "NInput",
      rule: {
        required: true,
      },
      componentProps: {
        style: { width: "240px" },
      },
    },
  ];
};

const authStore = useAuthStore();
async function submit() {
  const values = await zFormRef.value.validate();
  const { token } = await login(values);
  authStore.setToken(token);
  goHome();
}

async function goHome() {
  const userInfo = await getSelfInfo();
  authStore.setUserInfo(userInfo);
  await router.push(HOME_PAGE_ROUTE_PATH);
}
</script>

<style scoped lang="scss">
.login_container {
  background-color: goldenrod;
  height: 100vh;
  width: 100%;
  position: absolute;
  .login_banner {
    position: relative;
    top: 18%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    background-color: dodgerblue;
    padding: 64px;
    padding-right: 24%;
    .login_form_container {
      background: #fff;
      box-shadow: 0 2px 10px 0 hsl(0deg 0% 66% / 30%);
      border-radius: 8px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      width: 240px;
    }
  }
}
</style>
